<template>
  <h2>显示会员权益信息</h2>
  <table class="table-bordered" border="1">
    <thead>
      <tr style="background-color: #f5f5f5">
        <td>编号</td>
        <td>权益名称</td>
        <td>权益说明</td>
        <td>是否自定义</td>
        <td>规则类型</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in Right">
        <td>{{ item.mR_Id }}</td>
        <td>{{ item.mR_Name }}</td>
        <td>{{ item.mR_Info }}</td>
        <td>{{ item.mR_IsCustom ? "是" : "否" }}</td>
        <td>
          {{
            item.mR_RuleType == 1
              ? "折扣"
              : item.mR_RuleType == 2
              ? "餐饮"
              : "延时"
          }}
        </td>
        <td>
          <a href="#" @click="DelRights(item.mR_Id)" style="margin-right: 10px"
            >删除</a
          >
          <a href="#" @click="UpRights(item.mR_Id)">修改</a>
        </td>
      </tr>
    </tbody>
  </table>
  <span
    >当前共{{ page.totalCount }}条数据，每页显示{{
      page.pageSize
    }}条数据，当前为第{{ page.pageIndex }}/{{ page.pageCount }}页

    <a href="#" @click="GetInfo('首页')" style="margin-right: 10px">首页</a>
    <a href="#" @click="GetInfo('上一页')" style="margin-right: 10px">上一页</a>
    <a href="#" @click="GetInfo('下一页')" style="margin-right: 10px">下一页</a>
    <a href="#" @click="GetInfo('尾页')" style="margin-right: 10px">尾页</a>

    <select v-model="Rpage" @change="Getpageinfo">
      <option :value="0">请选择</option>
      <option :value="1">每页1条</option>
      <option :value="2">每页2条</option>
      <option :value="3">每页3条</option>
    </select>

    <input type="text" style="width:50px;height:50px" v-model="Rpageinfo">
    <input type="button" value="跳转" @click="Getinfopage">
  </span>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";

import { useRouter } from "vue-router";
const router = useRouter();

const Right = ref([
  {
    mR_Id: 0,
    mR_Name: "",
    mR_Info: "",
    mR_IsCustom: true,
    mR_RuleType: 0,
    mR_Rule: "",
  },
]);

// 创建响应式数据保存分页参数
const page = ref({
  pageIndex: 1, //当前页码
  pageSize: 2, //每页显示条数
  totalCount: 0, //总条数
  pageCount: 0, //总页数
});

onMounted(() => {
  ShowMemberRights();
});
const ShowMemberRights = () => {
  axios
    .get("https://localhost:7071/api/MemberRights/ShowMemberRights", {
      params: {
        pageIndex: page.value.pageIndex,
        pageSize: page.value.pageSize,
      },
    })
    .then((res) => {
      console.log(res.data);
      Right.value = res.data.pageDate;
      // 将总条数和总页数保存到响应式数据中
      page.value.totalCount = res.data.totalCount;
      page.value.pageCount = res.data.pagelCount;
    });
};

// 删除
const DelRights = (id: number) => {
  if (confirm("是否确定删除")) {
    axios
      .delete("https://localhost:7071/api/MemberRights/DeleteMemberRights", {
        params: {
          MRId: id,
        },
      })
      .then((res) => {
        if (res.data > 0) {
          alert("删除成功");
        } else {
          alert("删除失败");
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }
};

// 获取跳转编号
const UpRights = (mr_id: any) => {
  router.push("UpMemberRightsView?id=" + mr_id);
};

// 跳转指定页面
const GetInfo = (ch: string) => {
  // alert(ch)
  switch (ch) {
    case "首页":
      page.value.pageIndex = 1;
      break;
    case "上一页":
      if (page.value.pageIndex > 1) {
        page.value.pageIndex--;
      } else {
        alert("已经为首页");
      }
      break;

    case "下一页":
      if (page.value.pageIndex < page.value.pageCount) {
        page.value.pageIndex++;
      } else {
        alert("已经为尾页");
      }
      break;
    case "尾页":
      page.value.pageIndex = page.value.pageCount;
      break;
  }

  ShowMemberRights();
};

// 翻页
const Rpage = ref(2);
const Getpageinfo = () => {
  page.value.pageSize = Rpage.value;
  ShowMemberRights();
};

// 跳转
const Rpageinfo = ref("")
const Getinfopage = () => {
  const m = Rpageinfo.value;

  page.value.pageIndex = Number(m);
  ShowMemberRights();
}
</script>

<style scoped>
</style>